﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EmailTemplate.aspx.cs" Inherits="CRMWeb.Pages.Admin.EmailTemplate" %>


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>EMail Template</title>
    <link rel="stylesheet" type="text/css" href="/Css/CrmStyle.css" />
    <link rel="stylesheet" type="text/css" href="/EasyUI/Themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="/EasyUI/Themes/icon.css" />
    <script type="text/javascript" src="/Scripts/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="/EasyUI/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/Scripts/common.js"></script>
    <script src="../../tiny_mce/tiny_mce.js"></script>
</head>
<body>
    <form runat="server">
        <div id="pnlemail" title=" E-Mail Template" class="easyui-panel" style="width: auto; height: 650px">
            <div style="text-align: left">
                <a id="lnkNewEmailTemp" href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="newEmailemplate()"> New </a>&nbsp;
           
                <a id="lnkDeleteEmailTemp" href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="deleteEmailTemplate()"> Delete </a>
            </div>
            <div class="fitem">
                <label style="width: 120px; margin-left: 20px">Select Template:</label>
                <span id="spnddlEmailTemplate">

                        <select class="easyui-combotree" id="ddlEMAILTemplate" style="width: 520px;"
                            data-options="url:'/WebServices/EmailTemplate.ashx?method=DisplayTemplateNode',required:true, onSelect:selectEmailTemplate ">
                        </select>
                </span>
                <input id="txtEmailTemplate" class="easyui-validatebox" required="true" hidden="true" />
            </div>
            <div class="fitem">
                <label style="width: 120px; margin-left: 20px">Field:</label>
                <input class="easyui-combobox" id="cmbadmin_field" name="admin_field" style="width: 300px;" data-options="panelHeight:'300',url:'/WebServices/EmailTemplate.ashx?method=getColumnName',
				valueField:'COLUMN_NAME',
				textField:'COLUMN_NAME',
                  onSelect: function(rec){  
                    var caretPos = document.getElementById('txtTemplate').selectionStart;
                    var textAreaTxt = jQuery('#txtTemplate').val();
                    var txtToAdd = '%'+rec.COLUMN_NAME+'%';
                    tinyMCE.execInstanceCommand('txtTemplate','mceInsertContent',false,txtToAdd);
                }" />
            </div>
            <div class="fitem">
                <span id="spnCategory" style="display: none">
                    <label style="width: 120px; margin-left: 20px">Category :</label>
                    <select class="easyui-combotree" id="cmbCategory" style="width: 450px;"
                        data-options="url:'/WebServices/EmailTemplate.ashx?method=DisplayCategoryList',
                        required:true">
                    </select>
                </span>
            </div>
            <div class="fitem">
                <label style="width: 120px; margin-left: 20px">Operator:</label>
                <select id="cmbOperator" class="easyui-combobox" name="Operator" style="width: 110px;" data-options="panelHeight:'auto',
                    onSelect: function(rec){
                    var getVal=$('#cmbOperator').combogrid('getValue');
                    tinyMCE.execInstanceCommand('txtTemplate','mceInsertContent',false,getVal);
                    }">
                    <option value="%OperatorName%">Operator Name</option>
                </select>
                <input id="txtOpr" class="easyui-validatebox" required="true" hidden="true" />
            </div>
            <div class="fitem">
                <label style="width: 120px; margin-left: 20px">Subject:</label>
                <input type="text" id="txtEmailSub" aria-multiline="true" style="width: 298px" />
            </div>
            <div class="fitem">
                <label style="width: 120px; margin-left: 20px"">Description:</label>
            </div>
            <div data-options="region:'center'" style="padding: 10px;height:100%"  class="emailbox">
                <textarea id="txtTemplate" name="Template" class="easyui-validatebox" style="width: 100%; height: 610px"></textarea>
            </div>
            <div style="text-align: right;margin-right:20px" >
                 <a id="lnkCancleEmailTemp" href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="cancelEmailTemplate()"> Cancel </a>
                <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-ok" onclick="SaveEmailTemplates()"> Save </a>
            </div>
        </div>
        </form>
</body>
<script type="text/javascript">
    tinyMCE.init({
        mode: "exact",
        elements: "txtTemplate",
        theme: "advanced",
        plugins: "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
        theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2: "bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,help,code,|,forecolor,backcolor",
        setup: function (ed) {
            ed.onInit.add(function (ed) {
                ed.getDoc().body.style.fontSize = '13pt';
            });
        }
    });
    window.onresize = function () {
        $('#pnlemail').panel('resize', {
            width: window.innerWidth,
            height: window.innerHeight
        });
    }
    $(document).ready(function () {
        $('#ddlEMAILTemplate').combotree({
            onClick: function (node) {
                if (!$('#ddlEMAILTemplate').tree('isLeaf', node.target)) {
                    $('#ddlEMAILTemplate').combotree('setValues', '');
                    var t = $('#ddlEMAILTemplate').combotree('tree');
                    t.tree('toggle', node.target);
                    var p = $('#ddlEMAILTemplate').combotree('panel');
                    p.panel('open');
                }
            }
        });
        $('#cmbCategory').combotree({
            onClick: function (node) {
                if (!$('#cmbCategory').tree('isLeaf', node.target)) {
                    $('#cmbCategory').combotree('setValues', '');
                    var t = $('#cmbCategory').combotree('tree');
                    t.tree('toggle', node.target);
                    var p = $('#cmbCategory').combotree('panel');
                    p.panel('open');
                }
            }
        });
        $('#ddlEMAILTemplate').combobox('textbox').bind('click', function () {
            $('#ddlEMAILTemplate').combobox('showPanel');
        });
        $('#cmbadmin_field').combobox('textbox').bind('click', function () {
            $('#cmbadmin_field').combobox('showPanel');
        });
        $('#cmbCategory').combobox('textbox').bind('click', function () {
            $('#cmbCategory').combobox('showPanel');
        });
        $('#lnkCancleEmailTemp').hide();
        $('#lnkDeleteEmailTemp').hide();

    });
    function newEmailemplate() {
        $('#pnlemail').panel('setTitle', 'Create New E-Mail Template');
        $('#txtEmailTemplate').val('');
        $('#ddlEMAILTemplate').combotree('reload');
        $('#cmbCategory').combotree('setValue', '');
        $('#ddlEMAILTemplate').combotree('setValue', '');
        $('#cmbadmin_field').combobox('setValue', '');
        $('#txtEmailTemplate').show();
        $('#spnddlEmailTemplate').hide();
        $('#spnCategory').show();
        $('#lnkDeleteEmailTemp').hide();
        $('#lnkCancleEmailTemp').show();
        $('#lnkNewEmailTemp').hide();
        tinymce.get('txtTemplate').setContent('');
    }
    function cancelEmailTemplate() {
        $('#pnlemail').panel('setTitle', 'E-Mail Template');
        $('#txtEmailTemplate').val('');
        $('#spnCategory').hide();
        $('#ddlEMAILTemplate').combotree('reload');
        $('#cmbCategory').combotree('setValue', '');
        $('#ddlEMAILTemplate').combotree('setValue', '');
        $('#cmbadmin_field').combobox('setValue', '');
        $('#txtEmailSub').val('');
        $('#txtEmailTemplate').hide();
        $('#spnddlEmailTemplate').show();
        $('#lnkDeleteEmailTemp').hide();
        $('#lnkCancleEmailTemp').hide();
        $('#lnkNewEmailTemp').show();
        tinymce.get('txtTemplate').setContent('');

    }
    $(document).keydown(function (event) {
        if ((event.which == 83 || event.which == 115) && (event.ctrlKey || event.metaKey) || (event.which == 19)) {
            event.preventDefault();
            SaveEmailTemplates();
            return false;
        }
        return true;
    });
    //Save & update email template:
    function SaveEmailTemplates() {
        var EmailId = '';
        var tr = $('#cmbCategory').combotree('tree');	// get the tree object
        var Categorynode = tr.tree('getSelected');            // get selected node

        var t = $('#ddlEMAILTemplate').combotree('tree');	// get the tree object
        var templatNode = t.tree('getSelected');
        if (templatNode != null)
            EmailId = templatNode.id;

        var EmailTemplate = $('#txtEmailTemplate').val();
        var EmailTemplateFormat = encodeURIComponent(tinyMCE.get('txtTemplate').getContent());

        var emailSubject = $('#txtEmailSub').val();
        if (EmailId != '') {
            if (EmailTemplateFormat != '') {
                $.ajax({
                    url: '/WebServices/EmailTemplate.ashx',
                    type: 'POST',
                    data: {
                        method: 'EmailTemplateUpdate',
                        args: { EmailId: EmailId, TemplateFormat: EmailTemplateFormat, emailSubject: emailSubject, CategoryID: Categorynode.id },
                    },
                    success: function (data) {
                        if (data == 1) {
                            $.messager.alert('Morgan CRM', 'EmailTemplate updated successfully ');
                            cancelEmailTemplate();
                        }
                        else {
                            $.messager.alert('Morgan CRM', 'EmailTemplate already exist');
                        }
                    }
                });
            }
        }
        else {
            if (EmailTemplate != '' && EmailTemplateFormat != '') {
                $.ajax({
                    url: '/WebServices/EmailTemplate.ashx',
                    type: 'POST',
                    data: {
                        method: 'EmailTemplateAdd',
                        args: { EmailTemplate: EmailTemplate, TemplateFormat: EmailTemplateFormat, emailSubject: emailSubject, CategoryID: Categorynode.id }
                    },
                    success: function (data) {
                        if (data == 1) {
                            $.messager.alert('Morgan CRM', 'EmailTemplate Successfully Added');
                            cancelEmailTemplate();
                        }
                        else {
                            $.messager.alert('Morgan CRM', 'EmailTemplate already exist');
                        }
                    }
                });
            }
        }
    }
    //Delete email template:
    function deleteEmailTemplate() {

        var t = $('#ddlEMAILTemplate').combotree('tree');	// get the tree object
        var templatNode = t.tree('getSelected');
        var EmailId = templatNode.id;
        if (EmailId != '') {
            $.ajax({
                url: '/WebServices/EmailTemplate.ashx',
                type: 'POST',
                data: {
                    method: 'EmailTemplateDelete',
                    args: { EmailId: EmailId }
                },
                success: function (data) {
                    $.messager.alert('Morgan CRM', 'EmailTemplate deleted Successfully ');
                    cancelEmailTemplate();
                }
            });
        }
        else {
            $.messager.alert('Please select value to delete');
        }
    }

    //On select value:
    function selectEmailTemplate(node) {
        var currentTemplateId = node.id;
        if (currentTemplateId == -1) {
            $.messager.alert('Morgan CRM', 'Please select Template Item ... !', 'warning');
        }
        else {
            $('#lnkDeleteEmailTemp').show();
            $.ajax({
                url: "/WebServices/EmailTemplate.ashx?method=GetEmailTemplateContentById",
                contentType: "application/json; charset=utf-8",
                data: { EmailTemplateId: currentTemplateId },
                success: function (data) {
                    $.each(eval(data.replace(/[\r\n]/, '')), function (i, result) {
                        $('#txtEmailSub').val(result.emailsubject);
                        $('#cmbCategory').combotree('setValue', result.CategoryId);
                        tinymce.get('txtTemplate').setContent(decodeURIComponent(result.TemplateFormat));
                    });
                }

            });
        }
    }
</script>
</html>
